import React, { Component } from 'react'

export default class TabB extends Component {
  constructor(){
    // 子类继承父类，子类构造函数第一句话必须是super()
    super()
    console.log("01--constructor");
  }
  state = {
    msg:"南京"
  }
  //父类定义好的生命周期函数，子类重写了一遍
  componentDidMount(){
    console.log("03-componentDidMount");
  }

  //组件在更新之前.必须返回boolean
  // params1更新过后props对象
  // params2更新过后State对象
  shouldComponentUpdate(params1,params2){
   
    console.log("04-shouldComponentUpdate");
    if(params2.msg == this.state.msg){
      return false
    }
    return true
  }
  //组件更新完毕过后
  componentDidUpdate(){
    console.log("05-componentDidUpdate");
  }

  componentWillUnmount(){
    console.log("06-componentWillUnmount");
  }

  //render方法在父类里面已经设计好了，子类重写了函数。优先调用子类render
  render() {
    const {msg} = this.state
    // render函数代表渲染函数。表示页面被挂载、更新
    console.log("02-render");
    return (
      <div>
        <h2 className='h2'>TabB</h2>
        <h3>{msg}</h3>
        <button onClick={()=>this.setState({msg:"南京"})}>修改msg</button>
      </div>
    )
  }
}

